{extend name="public:base" /}

{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h3>普通订单总金额：{$all_goods_pay_price}元</h3>
                    <h3>套餐订单总金额：{$all_meal_pay_price}元</h3>
                </div>

                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择开始日期" type="text" name="start_time" value="{:input('start_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择结束日期" type="text" name="end_time" value="{:input('end_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="region_id" id="region_id" class="form-control form-control-lg">
                                    <option value="0">请选择区域</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="shop_id" id="shop_id" class="form-control form-control-lg">
                                    <option value="0">请选择门店</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <style>
                                    .select2-container--default .select2-selection--single {
                                        background-color: #fff;
                                        border: 1px solid #e5e6e7;
                                        border-radius: 4px;
                                    }
                                </style>
                                <select name="user_id" class="form-control" id="select2">
                                    <option value="0">请选择会员</option>
                                    {volist name="user_list" id="vo"}
                                    <option value="{$vo.id}" {$vo.id== input(
                                    'user_id') ? 'selected' : ''}>{$vo.username} / {$vo.mobile}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="type" class="form-control form-control-lg">
                                    <option value="0">请选择订单类型</option>
                                    <option value="1" {:input(
                                    'type') == 1 ? 'selected' : ''}>普通订单</option>
                                    <option value="2" {:input(
                                    'type') == 2 ? 'selected' : ''}>套餐订单</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <div id="main" style="width: 100%; height:600px;">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{/block}

{block name="js"}
<script src="__ADMIN__/js/echarts.min.js"></script>
<script src="/static/laydate/laydate.js"></script>

<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
    laydate.render({
        elem: '.screen-date' //指定元素
    });

    $('#select2').select2()

    var myChart = echarts.init(document.getElementById("main"));
    var time_list = `{$time_list}` ? JSON.parse(`{$time_list}`) : [];
    var order_list = `{$order_list}` ? JSON.parse(`{$order_list}`) : [];

    var option = {
        xAxis: {
            name: '日期',
            type: 'category',
            data: time_list
        },
        yAxis: {
            name: '销售额',
            type: 'value'
        },
        series: [
            {
                data: order_list,
                type: 'line',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => '销售额：' + value + '元'
        },
    };

    myChart.setOption(option);


    // 区域-门店 联动
    var region_list = `{:getRegionToShop()}` ? JSON.parse(`{:getRegionToShop()}`) : [];
    var region_id = `{:input('region_id')}` ? parseInt(`{:input('region_id')}`) : 0;
    var shop_id = `{:input('shop_id')}` ? parseInt(`{:input('shop_id')}`) : 0;

    if (region_list.length) {
        var option = `<option value="0">请选择区域</option>`;
        region_list.forEach(val => {
            var selected = region_id == val.id ? 'selected' : '';
            option += `<option value="${val.id}" ${selected}>${val.name}</option>`;
        })
        $('#region_id').html(option)
    }

    if (region_id) {
        var option = `<option value="0">请选择门店</option>`;
        for (var i = 0; i < region_list.length; i++) {
            if (region_list[i].id == region_id) {
                var shop_list = region_list[i].shop_list;
                if (shop_list.length) {
                    shop_list.forEach(val => {
                        var selected = val.id == shop_id ? 'selected' : '';
                        option += `<option value="${val.id}" ${selected}>${val.name}</option>`;
                    })
                }
                $('#shop_id').html(option);
                break;
            }
        }
        $('#shop_id').html(option);
    }

    $('#region_id').on('change', function () {
        var id = $(this).val();
        var option = `<option value="0">请选择门店</option>`;
        if (id > 0) {
            for (var i = 0; i < region_list.length; i++) {
                var region_id = region_list[i].id;
                if (id == region_id) {
                    var shop_list = region_list[i].shop_list;
                    if (shop_list.length) {
                        shop_list.forEach(val => {
                            option += `<option value="${val.id}">${val.name}</option>`;
                        })
                    }
                    $('#shop_id').html(option);
                    break;
                }
            }
        } else {
            $('#shop_id').html(option);
        }
    })


</script>{/block}